<template>
  <n-float-button
    @click="changeDrawer"
    :left="0"
    top="50%"
    shape="square"
    type="primary"
  >
    <n-icon size="35">
      <ChevronForward />
    </n-icon>
  </n-float-button>

  <div>
    <n-drawer
      :mask-closable="false"
      v-model:show="active"
      :width="220"
      placement="left"
      :show-mask="false"
    >
      <n-drawer-content closable>
        <MixMenuList />
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ChevronForward } from "@vicons/ionicons5";
import Appearance from "@/components/floatbtn/Appearance.vue";
import Layout from "@/components/floatbtn/Layout.vue";
import Common from "@/components/floatbtn/Common.vue";
import MixMenuList from "@/components/menu/MixMenu.vue";

const active = ref(false);
onMounted(() => {});

const changeDrawer = () => {
  active.value = !active.value;
};
</script>
<style scoped lang='scss'>
.n-float-button.n-float-button--square-shape {
  border-radius: 0 3px 3px 0;
}
</style>